<template>
    <canvas 
        @mousewheel="mousewheel" 
        @mousemove="mousemove"
        @mousedown="mousedown"
        @mouseup="mouseup"
        @mouseleave="mouseleave"
        :style="`background-color: ${backgroundColor}; cursor: pointer`"
        :width="width" 
        :height="height" 
        ref="canvas"
    ></canvas>
</template>

<script>
    import moment from 'moment';
    export default {
        props: {
            markTime: {     // 需要标记的时间
                type: Array,
                default() {
                    return []
                }
            },
            startMeddleTime: String,  // 中间的时间,
            timeRange: {     // 时间范围
                type: Array,
                default() {
                    return []
                }
            },
            width: {
                type: Number | String,
                default: 1000
            },
            height: {
                type: Number | String,
                default: 60
            },
            backgroundColor: {
                type: String,
                default: "#2b2f33"
            }
        },
        data() {
            return {
                whole_hour: 24,       // 整个canvas显示多少个小时
                canvas_width: null,   // canvas的宽度
                meddleTime: "2022-08-24 12:00:00",
                mouseDown: false,     // 移动时鼠标有没有按下
                mouseDownPosition: "",   // 鼠标按下时的位置
                mouseDownMeddleTime: "",   // 鼠标按下时中间的时间,
                isMove: false            // 鼠标按下时有没有移动
            }
        },
        mounted() {
            let time;
            if(this.timeRange[0] && this.timeRange[1]) {
                console.log(new Date(this.timeRange[0]) + new Date(this.timeRange[1]))
                time = moment((new Date(this.timeRange[0]).getTime() + new Date(this.timeRange[1]).getTime()) / 2).format("YYYY-MM-DD HH:mm:ss");
            }
            this.meddleTime = this.startMeddleTime || time || moment(new Date()).format("YYYY-MM-DD 12:00:00");
            this.ctx = this.$refs.canvas.getContext("2d");
            this.canvas_width = this.$refs.canvas.width;
            this.drowMeddleLine(this.meddleTime);
            this.drowScaleLine();
            this.drowMark();
            // console.log(this.canvas_width )

            // const start = moment('2017-11-08 11:42');
            // const remainder = 20 - (start.minute() % 20);
            // const dateTime = moment(start).add(remainder, "minutes").format("YYYY-MM-DD HH:mm:ss");
            // console.log(this.markTime);
        },
        methods: {
            mouseleave() {
                this.$refs.canvas.width = this.$refs.canvas.width;
                this.drowMeddleLine(this.meddleTime);
                this.drowScaleLine();
                this.drowMark();
                this.mouseDown = false;
            },
            mousemove(e) {   // 鼠标移动
                // console.log(e.offsetX)
                this.$refs.canvas.width = this.$refs.canvas.width;
                this.drowMeddleLine(this.meddleTime);
                this.drowMoveLine(e);
                this.drowScaleLine();
                this.drowMark();
                if(this.mouseDown) {
                    this.mouseDownMove(e);
                    this.isMove = true;
                }
            },
            mousewheel(e) {    // 滚动鼠标滚轮
                // console.log(e.wheelDelta)
                e.preventDefault()
                if(e.wheelDelta > 0) { // 时间变短
                    if(this.whole_hour - 6 == 0) {
                        this.whole_hour = 2;
                        return;
                    }
                    if(this.whole_hour > 6) {
                        this.whole_hour -= 6;
                    }
                } else {   // 时间变长
                    if(this.whole_hour == 2) {
                        this.whole_hour = 6;
                        return;
                    }
                    if(this.whole_hour < 24) {
                        this.whole_hour += 6;
                    }
                }
                this.$refs.canvas.width = this.$refs.canvas.width;
                this.drowMeddleLine(this.meddleTime);
                this.drowScaleLine();
                this.drowMark();
            },
            mousedown(e) {   // 按下鼠标
                // console.log(e.offsetX)
                this.mouseDown = true;
                this.mouseDownPosition = e.offsetX;
                this.mouseDownMeddleTime = this.meddleTime;
                this.isMove = false;
            },
            mouseup(e) {   // 抬起鼠标
                this.mouseDown = false;
                let date = e.offsetX * this.time_px * 1000 + this.startTime;
                if(
                    (this.timeRange[0] && date < new Date(this.timeRange[0]).getTime())
                    || 
                    (this.timeRange[1] && date > new Date(this.timeRange[1]).getTime())
                ) {
                    return;
                }
                // this.isMove || this.$emit("click", moment(date).format("YYYY-MM-DD HH:mm:ss"));
                if(!this.isMove) {
                    this.$emit("click", moment(date).format("YYYY-MM-DD HH:mm:ss"));
                    this.meddleTime = moment(date).format("YYYY-MM-DD HH:mm:ss");
                    this.$refs.canvas.width = this.$refs.canvas.width;
                    this.drowMeddleLine(this.meddleTime);
                    this.drowMoveLine(e);
                    this.drowScaleLine();
                    this.drowMark();
                }
            },
            mouseDownMove(e) {     // 鼠标按下移动
                // console.log(e.offsetX - this.mouseDownPosition)
                let offset = this.mouseDownPosition - e.offsetX;
                let date = new Date(this.mouseDownMeddleTime).getTime() + offset * this.time_px * 1000;
                if(
                    (this.timeRange[0] && date < new Date(this.timeRange[0]).getTime())
                    || 
                    (this.timeRange[1] && date > new Date(this.timeRange[1]).getTime())
                ) {
                    return;
                }
                // console.log(moment(date).format("YYYY-MM-DD HH:mm:ss"))
                this.meddleTime = moment(date).format("YYYY-MM-DD HH:mm:ss");
                this.drowMeddleLine(this.meddleTime)
            },
            drowMoveLine(e) {      // 画鼠标移上去的线
                let date = this.startTime + e.offsetX * this.time_px * 1000;
                if(
                    (this.timeRange[0] && date < new Date(this.timeRange[0]).getTime())
                    || 
                    (this.timeRange[1] && date > new Date(this.timeRange[1]).getTime())
                ) {
                    return;
                }
                this.ctx.beginPath();
                this.ctx.moveTo(e.offsetX - 1,0);
                this.ctx.lineTo(e.offsetX - 1,62);
                this.ctx.strokeStyle = "grey";
                this.ctx.lineWidth = 1;
                this.ctx.stroke();
                this.ctx.fillStyle = "rgb(64, 196, 255";
                this.ctx.fillText(moment(date).format("YYYY-MM-DD HH:mm:ss"), e.offsetX - 50, 55);
            },
            drowMeddleLine(time) {   // 画中间时间的线
                this.ctx.beginPath();
                this.ctx.moveTo(this.canvas_width / 2,0);
                this.ctx.lineTo(this.canvas_width / 2,31);
                this.ctx.strokeStyle = "rgb(64, 196, 255";
                this.ctx.lineWidth = 1;
                this.ctx.stroke();
                this.ctx.fillStyle = "rgb(64, 196, 255";
                this.ctx.fillText(time, this.canvas_width / 2 - 50, 40);
            },
            drowScaleLine() {   // 画刻度线
                this.getFirstLineTime()
                let time = new Date(this.getFirstLineTime()).getTime() - this.startTime;
                let p = time / 1000 /this.time_px;
                // // console.log(this.scaleLine_time, this.startTime);
                // let date = new Date(this.startTime).getHours() + 1;
                // let goDate = moment(this.startTime).format(`YYYY-MM-DD ${date}:00:00`)
                // // console.log(goDate)
                // let p = (new Date(goDate).getTime() - this.startTime) / (this.time_px * 1000);
                // // console.log(p)
                let line_px = this.scaleLine_time / this.time_px;   // 每条线之间的间隔
                // let k = 1
                for(let i = p; i <= this.canvas_width; i += line_px) {
                    let date = this.startTime + i * this.time_px * 1000;
                    // if(date < new Date(this.timeRange[0]).getTime() || date > new Date(this.timeRange[1]).getTime()) {
                    //     continue;
                    // }
                    if(
                        (this.timeRange[0] && date < new Date(this.timeRange[0]).getTime())
                        || 
                        (this.timeRange[1] && date > new Date(this.timeRange[1]).getTime())
                    ) {
                        continue;
                    }

                    // console.log(i)
                    this.ctx.beginPath();
                    this.ctx.moveTo(i, 0);
                    this.ctx.lineTo(i, 20);
                    this.ctx.strokeStyle = "grey";
                    this.ctx.lineWidth = 1;
                    this.ctx.stroke();
                    
                    let time = moment(date).format("HH:mm")
                    if(time == "00:00") {
                        let show_time = moment(date).format("YYYY-MM-DD HH:mm:ss")
                        this.ctx.fillStyle = "grey";
                        this.ctx.fillText(show_time, i - 50, 30);
                        continue;
                    }
                    // console.log(time)
                    if(this.show_time.includes(time)) {
                        this.ctx.fillStyle = "grey";
                        this.ctx.fillText(time, i - 10, 30);
                    }
                    // if(k == 1 || (k - 1) % 3 == 0) {
                        
                    //     this.ctx.fillStyle = "grey";
                    //     this.ctx.fillText(time, i - 10, 30);
                    // }
                    // k++;
                }
            },
            getFirstLineTime(startTime) {    // 获取第一个需要划线的时间
                const start = moment(this.startTime);
                if(this.whole_hour > 18) {
                    const remainder = 60 - (start.minute() % 60);
                    return moment(start).add(remainder, "minutes").format("YYYY-MM-DD HH:mm");
                }
                if(this.whole_hour >= 12) {
                    const remainder = 30 - (start.minute() % 30);
                    return moment(start).add(remainder, "minutes").format("YYYY-MM-DD HH:mm");
                }
                if(this.whole_hour >= 6) {
                    const remainder = 20 - (start.minute() % 20);
                    return moment(start).add(remainder, "minutes").format("YYYY-MM-DD HH:mm");
                }
                const remainder = 10 - (start.minute() % 10);
                return moment(start).add(remainder, "minutes").format("YYYY-MM-DD HH:mm");
            },
            showTime(time) {

            },
            drowMark() {    // 画标记的时间
                // console.log(this.markTime)
                this.markTime.forEach(item => {
                    this.ctx.fillStyle = item.bgColor;
                    let beginTime = (this.timeRange[0] && new Date(item.beginTime).getTime() < new Date(this.timeRange[0]).getTime())? this.timeRange[0]: item.beginTime;
                    let endTime = (this.timeRange[1] && new Date(item.endTime).getTime() > new Date(this.timeRange[1]).getTime())? this.timeRange[1]: item.endTime;
                    let start_x = (new Date(beginTime).getTime() - this.startTime) / 1000 / this.time_px;
                    let end_x = (new Date(endTime).getTime() - this.startTime) / 1000 / this.time_px;
                    this.ctx.fillRect(start_x, 0, end_x - start_x, 20);
                })
            }
        },
        computed: {
            time_px() {    // 每像素多少秒
                return (this.whole_hour * 60 * 60) / this.canvas_width;
            },
            startTime() {  // canvas最左边的时间的时间戳
                // console.log(moment("2022-08-23 12:00:00").format("YYYY-MM-DD HH:mm:ss"))
                // return moment(new Date(this.meddleTime).getTime() - this.time_px * this.canvas_width / 2 * 1000).format("YYYY-MM-DD HH:mm:ss")
                return new Date(this.meddleTime).getTime() - this.time_px * this.canvas_width / 2 * 1000;
            },
            scaleLine_time() {   // 每个刻度线之间的时间间隔,单位秒
                if(this.whole_hour > 18) {
                    return 60 * 60;
                }
                if(this.whole_hour >= 12) {
                    return 30 * 60;
                }
                if(this.whole_hour >= 6) {
                    return 20 * 60;
                }
                return 10 * 60;
            },
            show_time() { // 那些时间需要展示
                if(this.whole_hour > 18) {
                    return [ "03:00", "05:00", "07:00", "09:00", "11:00", "13:00", "15:00", "17:00", "19:00", "21:00", ]
                }
                if(this.whole_hour > 12) {
                    return [ "03:00", "05:00", "07:00", "09:00", "11:00", "13:00", "15:00", "17:00", "19:00", "21:00", ];
                }
                if(this.whole_hour > 6) {
                    return [ "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", 
                    "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00"];
                }
                return ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", 
                    "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00",
                    "01:30", "02:30", "03:30", "04:30", "05:30", "06:30", "07:30", "08:30", "09:30", "10:30", "11:30", "12:30", 
                    "13:30", "14:30", "15:30", "16:30", "17:30", "18:30", "19:30", "20:30", "21:30", "22:30", "23:30",
                ];
            }
        }
    }
</script>
